<template>
<div class="content">
    <v-header></v-header>
    <!-- {{$route.params.sid}} -->
    <p>{{joke.text}}</p>
    <span class="sub-title">{{joke.passtime}}</span>
    <!-- 判断video/image/gif/text -->
    <div>
        <img class="img" v-if="joke.type=='image' || joke.type== 'gif'" :src="joke.images">
        <p v-if="joke.type=='text'">
            {{joke.text}}
        </p>
        <video class="video" v-if="joke.type=='video'" :src="joke.video"
        controls="controls" autoplay></video>
    </div>
</div>
</template>

<script>
import vHeader from './header' 
import axios from  'axios'
import { getSingleJoke } from '../sever'
export default {
    data(){
        return{
            joke:{}
        }
    },
     components:{
        vHeader
    },
    created(){
        this.getJoke()
    },
    methods:{
        getJoke(){
            axios.get(getSingleJoke,{
                params:{
                    sid:this.$route.params.sid
                }
           })
            .then(res =>{
                console.log(res.data)
                this.joke=res.data.result
            })
            .catch(err=>{
                console.log(err)
            })
       }
   }
}
</script>

<style scoped>
.content{
    width: 800px;
    height: 100vh;
    margin: 0 auto;
    border-left: 1px solid #666;
    border-right: 1px solid #666;
}
    .sub-title{
        color: #999;
        font-size: 12px;
        display: block;
        text-align: right;
        margin-right: 10px;
    }
    .video{
        width: 100%;
        height: 600px;
    }
    .img{
        width: 100%;
    }
</style>